<template>
	<div class="news" @click="$router.push({ name: 'Article', query: { id: news.id } })">
		<!-- 单图文章 -->
		<div class="type1" v-if="news.type === 1 && news.cover.length < 3">
			<div class="left">
				<h3 class="title">{{ news.title }}</h3>
				<MyDesc :news="news"></MyDesc>
			</div>
			<div class="right">
				<van-image class="media" fit="cover" :src="news.cover[0].url | imgUrl" />
			</div>
		</div>
		<!-- 多图 -->
		<div class="type2" v-else-if="news.type === 1 && news.cover.length >= 3">
			<h3 class="title">{{ news.title }}</h3>
			<div class="cover">
				<van-image
					v-for="item in news.cover"
					:key="item.id"
					class="media"
					fit="cover"
					:src="item.url | imgUrl"
				/>
			</div>
			<MyDesc :news="news" :type="'多图'"></MyDesc>
		</div>
		<!-- 视频 -->
		<div class="type3" v-else>
			<h3 class="title">{{ news.title }}</h3>
			<div class="cover">
				<div class="video">
					<van-image class="media" fit="cover" :src="news.cover[0].url | imgUrl" />
					<van-icon name="play-circle" class="icon" />
				</div>
			</div>
			<MyDesc :news="news" :type="'视频'"></MyDesc>
		</div>
	</div>
</template>

<script>
import MyDesc from './MyDesc.vue';
export default {
	props: {
		news: {
			type: Object,
			required: true
		}
	},
	components: {
		MyDesc
	}
};
</script>

<style lang="less" scoped>
.news {
	& > div {
		border-bottom: 1px #dddee1 solid;
		padding: 10px;
		display: flex;
		background-color: #fff;
	}
	.type1 {
		.left {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title {
				font-size: 16px;
			}
		}
		.right,
		.media {
			width: 120px;
			height: 75px;
		}
	}
	.type2 {
		display: flex;
		flex-direction: column;
		.cover {
			display: flex;
			justify-content: space-evenly;
			margin: 5px 0;
			.media {
				width: 110px;
				height: 70px;
			}
		}
	}
	.type3 {
		display: flex;
		flex-direction: column;
		.video {
			width: 100%;
			height: 200px;
			margin: 10px 0;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			.media {
				width: 100%;
				height: 200px;
			}
			.icon {
				font-size: 80px;
				position: absolute;
				z-index: 1;
				opacity: 0.5;
			}
		}
	}
}
</style>
